// 复用样式

// 案例列表
@mixin _class {
    // 案例列表
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .list_wrap {
        background: url("../assets/homeImg/classLiBg.webp") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 30px;
        box-shadow: 0px 11px 27px 0px rgba(0, 0, 0, 0.1);
        padding-bottom: 44px;

        .li_pic {
            width: 470px;
            height: 344px;
            // background: pink;
            padding-top: 30px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .li_tit {
            margin: 30px 0;
            border-left: 5px solid #7095f8;
            padding-left: 25px;
        }

        .li_message {
            padding: 16px 27px;
            background: #f1f1f1;
            justify-content: space-between;

            .mes_time {
                .icon {
                    margin-right: 10px;
                }

                .data {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #7c7c7c;
                }
            }

            .label {
                padding: 8px 6px;
                border: 1px solid #7095f8;
                border-radius: 4px;
                max-width: 142px;
                max-height: 32px;
                overflow-x: hidden;

                .text {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #7095f8;
                    margin-left: 6px;
                }
            }

            .label:nth-child(1) {
                margin-right: 7px;
            }
        }
    }
}

// 副页面头部
@mixin _headStyle {
    background: #222735;
    padding: 194px 0 96px 232px;
    font-family: PingFang SC, PingFang SC;

    .tit {
        font-weight: 600;
        font-size: 59px;
        color: #ffffff;
    }

    .know_btn {
        margin-top: 38px;
        border-radius: 379px 379px 379px 379px;
        border: 3px solid #ffffff;
        padding: 16px 0;
        max-width: 248px;
        font-weight: 600;
        font-size: 27px;
        color: #ffffff;
        justify-content: center;

        .icon {
            width: 24px;
            height: 21px;
            margin-left: 14px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

// 副页面头部分类
@mixin _headClass {
    padding: 0 126px;
    background: rgba(255, 255, 255, 0.2);
    justify-content: space-between;

    .tabLi {
        padding: 50px 0;
        flex: 1;
        border-left: 3px solid #dedede;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 27px;
        color: #151618;
        text-align: center;
        cursor: pointer;
    }

    .tabLi:last-child {
        border-right: 3px solid #dedede;
    }

    .on {
        color: #7095f8;
        font-weight: 600;
    }
}

// 面包屑
@mixin _crumbsStyle {
    padding: 54px 80px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 27px;
    color: #878686;

    .el-icon-arrow-right {
        margin: 0 13px;
    }

    .now {
        font-weight: 600;
        font-size: 27px;
        color: #7095f8;
    }
}